<!-- <template> -->
<!-- <u-tabs
		v-if="showData.type === '2'"
		name="title"
		:inactive-color="showData.fontColor"
		:bg-color="showData.bgColor"
		:list="showData.navList"
		:is-scroll="false"
		v-model="current"
	></u-tabs>
	<u-grid v-if="showData.type === '1'" :col="showData.showNum" :border="false">
		<u-grid-item v-for="(item, index) in showData.navList" @click="toPage(item.linkUrl)" :key="index" :bg-color="showData.bgColor">
			<image :src="item.url" mode="aspectFill" style="height: 25px; width: 25px"></image>
			<view class="grid-text">{{ item.title }}</view>
		</u-grid-item>
	</u-grid> -->
<!-- </template> -->
<template>
	<view :style="dynamicStyles">
		<u-tabs v-if="showData.type === '2'" v-model="current" :list="showData.navList">
		</u-tabs>
		<!-- 宫格 -->
		<view v-else-if="showData.type === '3' || showData.type === '1'" class="hx-grid">
			<scroll-view v-if="showData.scrollShow" scroll-x class="hx-grid-scroll" :enhanced="true"
				:show-scrollbar="false">
				<view class="scroll-content">
					<view v-for="(item, index) in showData.navList" :key="index" class="scroll-item"
						@click="toJumpUrl(item.link.url)">
						<image :src="item.url" :style="{
							width: `${showData.imgSize}px`,
							height: `${showData.imgSize}px`,
							borderRadius: `${showData.imgRadius}px`
						}" />
						<view class="grid-text" v-if="showData.type === '3' && item.title">{{ item.title }}</view>
					</view>
				</view>
			</scroll-view>
			<view v-else class="hx-grid-list">
				<view v-for="(item, index) in showData.navList" :key="index" class="hx-grid-item"
					:style="{ width: `${100 / showData.showNum}%` }" @click="toJumpUrl(item.link.url)">
					<image :src="item.url" :style="{
						width: `${showData.imgSize}px`,
						height: `${showData.imgSize}px`,
						borderRadius: `${showData.imgRadius}px`
					}" />
					<view class="grid-text" v-if="showData.type === '3' && item.title">{{ item.title }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
.hx-grid {
	width: 100%;

	&-scroll {
		width: 100%;

		.scroll-content {
			white-space: nowrap;
			padding: 20rpx;
			font-size: 0; // 消除间隙

			.scroll-item {
				display: inline-block;
				width: auto;
				margin-right: 30rpx;
				text-align: center;
				vertical-align: top;
				font-size: initial; // 恢复字体大小

				&:last-child {
					margin-right: 0;
				}

				image {
					display: block;
					margin: 0 auto;
				}

				.grid-text {
					font-size: 28rpx;
					margin-top: 10rpx;
					white-space: normal;
					text-align: center;
				}
			}
		}
	}

	&-list {
		display: flex;
		flex-wrap: wrap;
	}

	&-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
}

.grid-text {
	font-size: 28rpx;
	margin-top: 10rpx;
	color: inherit;
}
</style>
<script setup lang="ts">
import { ref, computed } from 'vue';
import { toJumpUrl } from '@/utils/index';

const props = defineProps({
	showData: {
		type: Object,
		default: () => { },
	},
});
const current = ref(0);
const dynamicStyles = computed(() => {
	const commonStyle = props.showData.commonStyle;
	return {
		marginTop: `${commonStyle.styleTopMargin}px`,
		marginLeft: `${commonStyle.styleLeftMargin}px`,
		marginRight: `${commonStyle.styleRightMargin}px`,
		marginBottom: `${commonStyle.styleBottomMargin}px`,
		paddingTop: `${commonStyle.styleTopPadding}px`,
		paddingLeft: `${commonStyle.styleLeftPadding}px`,
		paddingRight: `${commonStyle.styleRightPadding}px`,
		paddingBottom: `${commonStyle.styleBottomPadding}px`,
		borderTopLeftRadius: `${commonStyle.styleLtRadius}px`,
		borderTopRightRadius: `${commonStyle.styleRtRadius}px`,
		borderBottomLeftRadius: `${commonStyle.styleLbRadius}px`,
		borderBottomRightRadius: `${commonStyle.styleRbRadius}px`,
		color: props.showData.fontColor,
		...(commonStyle.bgPicUrl && {
			background: `url(${commonStyle.bgPicUrl})`,
			backgroundRepeat: 'no-repeat',
			backgroundPosition: 'center',
			backgroundSize: '100% 100%'
		}),
		...(!commonStyle.bgPicUrl && {
			background: `linear-gradient(${commonStyle.bgColorDirection || 'to right'}, 
				${commonStyle.bgStartColor || ''}, 
				${commonStyle.bgEndColor || commonStyle.bgStartColor || ''})`
		}),
	};
});

</script>
